<!--
 * @Author: your name
 * @Date: 2021-10-04 08:25:24
 * @LastEditTime: 2021-10-11 21:01:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\components\layout.vue
-->
<template>
  <a-layout>
    <a-layout-header class="header" :style="{ position: 'fixed', zIndex: 1, width: '100%', height: '50px', display: 'flex', alignItem: 'center' }">
      <div class="logo" />
    </a-layout-header>
    <a-layout>
      <a-layout-sider 
       :style="{ background: '#fff', marginTop: '50px', overflow: 'auto', height: '100vh', left: 0 }">
        <a-menu
          mode="inline"
          theme="dark"
          :inline-collapsed="collapsed"
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          :defaultSelectedKeys="selectedKeys"
          :defaultOpenKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
          @click="handleClickMenu"
        > 
          <RoutesList
            :routes="routes[0].children"
          />
        </a-menu>
      </a-layout-sider>
      <a-layout style="margin-top: 50px">
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { defineComponent, ref, computed, onBeforeMount } from 'vue';
import { 
  useStore 
} from 'vuex';
import { useRoute, useRouter } from 'vue-router'
import { routes } from '../routes/index'
import RoutesList from './RoutesList.vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons-vue';

const filterRouteToPath = (selKey, routes) => {
  for (let i = 0; i < routes.length; i ++) {
    if (String(routes[i].id) === selKey) {
      return routes[i].path
    }
    if (!routes[i].hasOwnProperty('children')) {
      continue
    }
    const path = filterRouteToPath(selKey, routes[i].children)
    if (path) return path
  }
  return null
}
 
// 获取openKeys selectedKeys
const findKeysFromPath = (path, routes, openKeys) => {
  for (const item of routes) {
    if (item.path === path) {
      return {
        selectedKeys: String(item.id),
        openKeys: [...openKeys, String(item.id)]
      }
    }
    if (!item.hasOwnProperty('children')) continue
    const res = findKeysFromPath(path, item.children, [...(openKeys || []), String(item.id)])
    if (res) return res
  }
  return null
}

export default defineComponent({
  setup() {
    const store = useStore();
    const selectedKeys = computed(() => store.state.menu.selectedKeys)      // 会报警告, 不知道咋去掉警告，用下面的方式不会
    const openKeys = computed({
      get() {
        return store.state.menu.openKeys
      },
      set() {}
    })
    const collapsed = ref(false);

    const route = useRoute()
    const router = useRouter()

    onBeforeMount(() => {
      const { path } = route
      const res = findKeysFromPath(path, routes)
      if (res) {
        store.dispatch('changeSelectKeys', [res.selectedKeys])
        store.dispatch('changeOpenKeys', res.openKeys)
      }
    })

    const toggleCollapsed = () => {
      collapsed.value = !collapsed.value;
    };
    const handleClickMenu = ({ item, key, keyPath }) => {
      store.dispatch('changeSelectKeys', [key])
      store.dispatch('changeOpenKeys', keyPath)
      const path = filterRouteToPath(key, routes)
      if (path) router.push(path)
    }

    return {
      selectedKeys,
      openKeys,
      
      collapsed,
      toggleCollapsed,
      routes,
      handleClickMenu,
    };
  },
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    RoutesList,
  }
});
</script>
<style>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>